<template>
  <div class="aboutUs" v-if="!isPhone">
    <p>LIYUE MEDIA TECHNOLOGY</p>
    <p>(CHENGDU) CO., LTD.</p>
    <p class="company">历阅传媒科技（成都）有限公司</p>
    <div class="imgBox-aboutUs">
      <transition-group name="animate__animated animate__bounce" appear>
        <div
          class="animate__zoomIn imgBox-aboutUs-item"
          v-for="(item, i) in descList"
          :key="i"
        >
          <img
            :src="`https://lycm-food.oss-cn-chengdu.aliyuncs.com/school/pictur${
              i + 1
            }.png`"
            alt=""
          />
          <p class="info">
            <span class="desc">{{ item.desc }}</span>
            <span class="local" v-if="item.local">{{ item.local }}</span>
          </p>
        </div>
      </transition-group>
    </div>

    <!-- <div class="page">
      <div>
        <span
          @click="pageChange(i)"
          :class="['page-item', i === current ? 'active' : '']"
          v-for="(item, i) in Array(2)"
          :key="i"
        ></span>
      </div>
    </div> -->
  </div>
  <div class="aboutUs-phone" v-else>
    <div class="header-img">
      <p>LIYUE MEDIA TECHNOLOGY</p>
      <p>(CHENGDU) CO., LTD.</p>
      <p class="company">历阅传媒科技（成都）有限公司</p>
    </div>
    <div class="imgBox-aboutUs">
      <div
        class="animate__zoomIn imgBox-aboutUs-item"
        v-for="(item, i) in descList"
        :key="i"
      >
        <img
          :src="`https://lycm-food.oss-cn-chengdu.aliyuncs.com/school/pictur${
            i + 1
          }.png`"
          alt=""
        />
        <p class="info">
          <span class="desc">{{ item.desc }}</span>
          <span class="local" v-if="item.local">{{ item.local }}</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
let current = ref(0)
let pageChange = (i) => {
  current.value = i
}
let isPhone = ref(false)
// 初始化
onMounted(() => {
  const dom = document.body.clientWidth
  isPhone.value = dom < 1000
})
let descList = reactive([
  {
    desc: '2023年6月“魅力四川澜湄行”高等教育展',
    local: '',
  },
  {
    desc: '2023年6月“魅力四川澜湄行”高等教育展',
    local: '泰国曼谷站-萨拉维他雅学校礼堂',
  },
  {
    desc: '2023年6月“魅力四川澜湄行”高等教育展',
    local: '泰国清迈站-泰国清迈大学',
  },
  {
    desc: '2023年6月“魅力四川澜湄行”高等教育展',
    local: '老挝琅勃拉邦站-苏发努冯大学',
  },
  {
    desc: '研学英国',
    local: '拜访帝国理工大学',
  },
])
</script>

<style  lang='scss' scoped>
.aboutUs {
  width: 100%;
  height: 100%;
  background: url('@/assets/images/background_aboutUs.png');
  background-size: cover;
  padding: 210px 0 150px 220px;
  overflow: hidden;
  position: relative;
  p {
    font-size: 70px;
    font-family: Source Han Sans-Bold, Source Han Sans;
    font-weight: 700;
    color: #ffffff;
    line-height: 101px;
  }
  .company {
    font-size: 24px;
    font-family: Source Han Sans-Regular, Source Han Sans;
    font-weight: 400;
    color: #ffffff;
    line-height: 35px;
  }
  .imgBox-aboutUs {
    width: 100%;
    height: 230px;
    display: flex;
    // justify-content: space-around;
    // position: absolute;
    &-item {
      width: 300px;
      height: 200px;
      cursor: pointer;
      margin-top: 120px;
      margin-left: 15px;
      position: relative;
      img {
        width: 100%;
        height: 100%;
      }
      .info {
        width: 100%;
        height: 52px;
        background: rgba(3, 28, 34, 0.9);
        position: absolute;
        bottom: 0;
        left: 0;
        border-radius: 0;
        padding: 6px 17px;
        color: #fff;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        span {
          display: inline-block;
          width: 100%;
          height: 15px;
          font-size: 14px;
          font-weight: 400;
          line-height: 15px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }

    @keyframes widthChange {
      0% {
        width: 300px;
        height: 200px;
      }
      100% {
        width: 430px;
        height: 290px;
        margin-top: 60px;
      }
    }
    &-item:hover {
      animation-name: widthChange;
      animation-duration: 1s;
      width: 430px;
      height: 290px;
      margin-top: 60px;
      border-radius: 8px 8px 8px 8px;
      border: 2px solid #8bf6ff;
      img {
        border-radius: 8px 8px 8px 8px;
      }
      .info {
        border-radius: 0px 0px 8px 8px;
        span {
          color: #8bf6ff;
        }
      }
    }
  }
  .page {
    position: absolute;
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    bottom: 20px;
    left: 0;
    div {
      display: flex;
      .page-item {
        display: block;
        width: 13px;
        height: 13px;
        background-color: #646464;
        border-radius: 100%;
        margin-left: 8px;
        cursor: pointer;
      }
      .page-item:hover {
        background-color: #fff;
      }
      .active {
        background-color: #fff;
      }
    }
  }
}
.aboutUs-phone {
  width: 100%;
  height: 100%;
  background-color: #fff;
  .header-img {
    width: 100%;
    height: 200px;
    background: url('@/assets/images/background_aboutUs.png');
    background-size: cover;
    padding: 59px 0 16px 16px;
    p {
      font-size: 22px;
      font-family: Source Han Sans-Bold, Source Han Sans;
      font-weight: 700;
      color: #ffffff;
      line-height: 32px;
      width: 100%;
    }
    .company {
      font-size: 15px;
      font-family: Source Han Sans-Regular, Source Han Sans;
      font-weight: 400;
      color: #ffffff;
      line-height: 35px;
    }
  }
  .imgBox-aboutUs {
    width: 100%;
    height: calc(100% - 200px);
    overflow: auto;
    .imgBox-aboutUs-item {
      width: 100%;
      padding: 0 18px 0 22px;
      display: flex;
      align-items: center;
      margin-top: 20px;
      // justify-content: space-between;
      img {
        width: 170px;
        height: 120px;
        border-radius: 8px 8px 8px 8px;
      }
      .info {
        margin-left: 10px;
        width: calc(100% - 160px);
        font-size: 12px;
        span {
          display: inline-block;
          line-height: 16px;
        }
      }
    }
  }
}
// @media screen and (max-width: 1000px) {
//   .aboutUs {
//     padding: 59px 0 16px 16px;
//   }
// }
</style>
